<template>
  <div>
    <div class="bg">
      <p class="words"><b>查看产出排行</b></p>
      <div class="table" v-loading="isLoading">
        <el-table :data="newTableData"
                  border
                  stripe
                  style="width:85%;min-height:50.5vh">
          <el-table-column prop="number"
                           label="序号"
                           width="180"></el-table-column>
          <el-table-column prop="name"
                           label="排行名称"></el-table-column>
          <el-table-column prop="index"
                           label="排行名次"
                           width="180"></el-table-column>
          <el-table-column prop="avg"
                           label="平均值"
                           width="180"></el-table-column>
          <el-table-column prop="data"
                           label="自己的值"
                           width="180"></el-table-column>
        </el-table>
        <!-- 下一页按钮 -->
        <div class="block">
          <el-pagination layout="prev, pager, next"
                         :pageCount="pageCount"
                         :pager-count="5"
                         @current-change="current_change"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  components: {},
  data() {
    return {
      pageCount: 0,
      pagesize: 7, //每个页面显示的数量
      currentPage: 1,
      tableData: [],
      newTableData: [],
      isLoading:true,
    };
  },
  methods: {
    getInfo(pages) {
      let _this = this;
      _this.isLoading = true;
      // 获取每页要显示的内容
      this.$http({
        method: "get",
        url: "/api/watcher/getOwnRank",
        params: {
          // u_id: 6,
          type: 1,
          page: 1,
          limit: 5
        }
      })
        .then(function(response) {
          console.log(response.data);
          if (response.data.code === 0) {
            _this.tableData.push(response.data.data.data);
            _this.pageCount = response.data.data.pages;
            for (
              let index = 0;
              index < Object.keys(_this.tableData[0]).length;
              index++
            ) {
              _this.newTableData.push({
                number: index + 1,
                name: Object.keys(_this.tableData[0])[index],
                index:
                  _this.tableData[0][Object.keys(_this.tableData[0])[index]]
                    .index,
                avg:
                  _this.tableData[0][Object.keys(_this.tableData[0])[index]]
                    .avg,
                data:
                  _this.tableData[0][Object.keys(_this.tableData[0])[index]]
                    .data
              });
            }
          } else {
            _this.message(true, response.data.message, "danger");
          }
          _this.isLoading = false;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    current_change: function(currentPage) {
      this.currentPage = currentPage;
      this.getInfo(currentPage - 1);
    }
  },
  mounted() {
    let _this = this;
    _this.getInfo(0);
  }
};
</script>

<style scoped>
.bg {
  height: 79vh;
  width: 81vw;
  padding: 2vh 4vw;
  background-color: #fff;
  margin: 6vh auto;
  font-size: 18px;
}
.words {
  font-size: 25px;
}
.table {
  width: 95%;
  margin: 20px auto;
}
</style>